<!-- v-if 和 v-show 的区别  -->

<script setup>
    
    import {ref} from 'vue';

    var stuArr = ref([
        {sno: 1, sname: "wwy1", isShow: true},
        {sno: 2, sname: "wwy2", isShow: true},
        {sno: 3, sname: "wwy3", isShow: true},
        {sno: 4, sname: "wwy4", isShow: true},
        {sno: 5, sname: "wwy5", isShow: false}
    ]);

    function deleteFunc(sno){
        alert("删除: " + sno);
    }



</script>

<template>
    
    <table border="1">
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>


        <!-- 
            table tr div(干扰) td
        <tr v-for="stu in stuArr">
            <div v-if="stu.isShow">
                <td>{{ stu.sno }}</td>
                <td>{{ stu.sname }}</td>
                <td><button @click="deleteFunc(stu.sno)" >删除</button></td>
            </div>
        </tr> -->


        <!-- table div(干扰) tr td -->
        <!-- <div v-for="stu in stuArr" >
            <tr  v-if="stu.isShow">
                <td>{{stu.sno  }}</td>
                <td>{{stu.sname  }}</td>
                <td><button @click="deleteFunc(stu.sno)">删除</button></td>
            </tr>
        </div> -->

        <!--  template 标签  它不会 在 页面中出现 ，就不会干扰标签 因为 table --》tr --》td/th 标签和标签之间不能有其他元素或数据  
          table  template（渲染后，不会出现，就不会干扰）  tr div  td  
         -->
        <!-- <template v-for="stu in stuArr">
            <tr  v-if="stu.isShow">
                <td>{{stu.sno  }}</td>
                <td>{{stu.sname  }}</td>
                <td><button @click="deleteFunc(stu.sno)">删除</button></td>
            </tr>
        </template> -->

        <!-- 加上序号列 -->
        <template v-for="(stu,index) in stuArr">
            <!-- <tr  v-if="stu.isShow"> -->
            <tr v-if="(index+1)%2==0">
                <td>{{ index+1 }}</td>
                <td>{{stu.sno  }}</td>
                <td>{{stu.sname  }}</td>
                <td><button @click="deleteFunc(stu.sno)">删除</button></td>
            </tr>
        </template>

    </table>

</template>


